<template>
    <div>
        <web-header show="group" />
        <div class="baotuan1">
            <div class="title">
                <h1>团建搞点有意思的吧</h1>
                <h2>充满“套路”的团建，要是多搞两次，作为组织者的你估计要被骂惨了</h2>
            </div>
            <div class="baotuan1box">
                <ul>
                    <li>
                        <div class="baotuan1list" style="background-color: #7038ca">
                            <div>
                                <img src="https://admin.hqx.com.cn/Public/Travel/images/company/tuanjian01.png" />
                            </div>
                            <h1>传统</h1>
                            <p>
                                就是大家熟知的拓展训练。最经典的团建形式，同时也是被吐槽得最多的一种。简单地说，就是把你带到拓展基地去做各种项目。
                            </p>
                        </div>
                    </li>
                    <li>
                        <div class="baotuan1list" style="background-color: #0189d6">
                            <div>
                                <img src="https://admin.hqx.com.cn/Public/Travel/images/company/tuanjian02.png" />
                            </div>
                            <h1>旅行</h1>
                            <p>
                                顾名思义，就是去旅行，然后在游玩中会穿插一些团建项目，相当于大家一起出去旅游，放松一下
                            </p>
                        </div>
                    </li>
                    <li>
                        <div class="baotuan1list" style="background-color: #38ca88">
                            <div>
                                <img src="https://admin.hqx.com.cn/Public/Travel/images/company/tuanjian03.png" />
                            </div>
                            <h1>企业定制</h1>
                            <p>
                                根据企业需求，进行团建的定制，会有很多企业元素的融入（团建公司靠谱的话）。这类团建的针对性最强，可以确保活动是与众不同的，有很好的体验。
                            </p>
                        </div>
                    </li>
                    <li>
                        <div class="baotuan1list" style="background-color: #d67701">
                            <div>
                                <img src="https://admin.hqx.com.cn/Public/Travel/images/company/tuanjian04.png" />
                            </div>
                            <h1>吃喝玩乐</h1>
                            <p>
                                聚餐、唱K、密室逃脱、聚会轰趴、王者荣耀、狼人杀、体感游戏、保龄球，棋牌，瑜伽等等
                            </p>
                        </div>
                    </li>
                    <li>
                        <div class="baotuan1list" style="background-color: #ca385a">
                            <div>
                                <img src="https://admin.hqx.com.cn/Public/Travel/images/company/tuanjian05.png" />
                            </div>
                            <h1>户外活动</h1>
                            <p>
                                徒步、攀岩、漂流、滑雪、潜水、帆船、游艇、蹦极、射箭、轮滑、登山、探险、速降、冲浪、高尔夫等等
                            </p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="title_a">
            <div class="title_en">League Construction and expansion</div>
            <div class="title_cn" style="max-width: 1050px">
                团建拓展，助力企业管理与发展
            </div>
            <div class="title_txt">
                10年精耕细作，品质团建，3000家企业的参与为您见证。
            </div>
        </div>
        <div class="box_a">
            <div class="list center-1400">
                <dl>
                    <dt><img src="https://admin.hqx.com.cn/Public/Group/img/101.png" /></dt>
                    <dd>
                        <h3>国内旅行团建</h3>
                        <span>提升员工福利、优化团队人际关系。通过团建旅游，能进一步增强归属感、加强团队合作意识、提高工作效率。</span>
                    </dd>
                </dl>
                <dl>
                    <dt><img src="https://admin.hqx.com.cn/Public/Group/img/102.png" /></dt>
                    <dd>
                        <h3>广东旅行团建</h3>
                        <span>专业提供新颖的、有趣、好玩的、高端而富有意义的团建活动方案，感受当地独特风俗、历史文化、自然风景。</span>
                    </dd>
                </dl>
                <dl>
                    <dt><img src="https://admin.hqx.com.cn/Public/Group/img/103.png" /></dt>
                    <dd>
                        <h3>团队拓展训练</h3>
                        <span>员工有动力，团队好发展。增强凝聚力、激发员工潜能、提升团队精神。使您整个团队面貌将焕然一新，具备更强劲的发展动力！</span>
                    </dd>
                </dl>
                <dl>
                    <dt><img src="https://admin.hqx.com.cn/Public/Group/img/104.png" /></dt>
                    <dd>
                        <h3>广东温泉团建</h3>
                        <span>春寒赐浴华清池，温泉水滑洗凝脂。一场以温泉为主题的团建活动，即休闲放松，又提升企业凝聚力、协调员工内部关系。</span>
                    </dd>
                </dl>
                <dl>
                    <dt><img src="https://admin.hqx.com.cn/Public/Group/img/105.png" /></dt>
                    <dd>
                        <h3>红色旅游</h3>
                        <span>红色主题团建活动，弘扬先辈们艰苦奋斗的革命精神，主动参与、互动协作，增强团队凝聚力，提升团队成员归属感！</span>
                    </dd>
                </dl>
                <dl>
                    <dt><img src="https://admin.hqx.com.cn/Public/Group/img/106.png" /></dt>
                    <dd>
                        <h3>会议旅游</h3>
                        <span>有机的结合了会议与旅游，完美的整合了休闲与商务，调动与会人员的积极性，达到团队沟通、交流和解决问题的目的。</span>
                    </dd>
                </dl>
            </div>
        </div>
        <div class="title_b">
            <h3>不要眨眼，还有N种好玩的兴趣主题，等你来探索</h3>
            <span>嗨！我们是启发旅游灵感的网站，为你解决去哪玩的问题。不信？<br />
                现在就来搜一搜，灵感马上来。</span>
        </div>
        <div class="nav_a">
            <ul>
                <li>团队建设</li>
                <li>企业旅行</li>
                <li>会议商务</li>
                <li>户外拓展</li>
            </ul>
        </div>
        <div class="box_bg">
            <div class="box_b">

                <div v-for="(item, index) in list" :key="item.id">
                    <div v-if="index == 0" class="lista">
                        <router-link :to="'/details/' + item.id">
                            <div class="pic">
                                <img :src="item.pic" class="img" />
                            </div>
                            <div class="days">{{ item.line_days }}天</div>
                            <div class="title">
                                <h3>{{ item.title }}</h3>
                                <div class="theme">
                                    <div v-for=" theme in item.themeArray" :key="theme.id">
                                        {{ theme.title }} &nbsp;&nbsp;
                                    </div>
                                </div>
                                <span>￥{{ item.price }}元/人起</span>
                            </div>
                        </router-link>
                    </div>
                    <div v-else class="listb">
                        <router-link :to="'/details/' + item.id">
                            <dl>
                                <dt>
                                    <img :src="item.pic" class="img" />
                                    <div class="days">{{ item.line_days }}天</div>
                                    <div class="price">￥{{ item.price }}元/人起</div>
                                </dt>
                                <dd>
                                    <h3>{{ item.title }}</h3>
                                    <div class="theme">
                                        <div v-for=" theme in item.themeArray" :key="theme.id">
                                            {{ theme.title }} &nbsp;&nbsp;
                                        </div>
                                    </div>

                                    <!-- <span>{{item.intro}}</span> -->
                                </dd>
                            </dl>
                        </router-link>
                    </div>
                </div>

            </div>
        </div>
        <div class="box_c">
            <div class="title_a">
                <div class="title_en">Theme scheme</div>
                <div class="title_cn">团建方案</div>
                <div class="title_txt">6大创新系列、100+门创新团建课程不一样的体验</div>
            </div>
        </div>
        <div class="box_d">
            <ul>
                <li>
                    <router-link target="_blank" to="/group/theme?id=73">
                        <img src="https://admin.hqx.com.cn/Public/Group/img/4.png" />
                        <span>旅行团建</span>
                        <span>SPORTS LEAGUE BUILDING</span>
                    </router-link>
                </li>
                <li>
                    <router-link target="_blank" to="/group/theme?id=75"><img
                            src="https://admin.hqx.com.cn/Public/Group/img/1.png" />
                        <span>团建共创</span>
                        <span>TEAM BUILDING</span>
                    </router-link>
                </li>
                <li>
                    <router-link target="_blank" to="/group/theme?id=78"><img
                            src="https://admin.hqx.com.cn/Public/Group/img/2.png" />
                        <span>情景体验</span>
                        <span>SITUATIONAL EXPERIENCE</span>
                    </router-link>
                </li>
                <li>
                    <router-link target="_blank" to="/group/theme?id=76"><img
                            src="https://admin.hqx.com.cn/Public/Group/img/3.png" />
                        <span>经典拓展</span>
                        <span>CLASSICAL EXPANSION</span>
                    </router-link>
                </li>
                <li>
                    <router-link target="_blank" to="/group/theme?id=74"><img
                            src="https://admin.hqx.com.cn/Public/Group/img/5.png" />
                        <span>户外探险</span>
                        <span>OUTDOOR ADVENTURE</span>
                    </router-link>
                </li>
                <li>
                    <router-link target="_blank" to="/group/theme?id=77"><img
                            src="https://admin.hqx.com.cn/Public/Group/img/6.png" />
                        <span>赛事挑战</span>
                        <span>COMPETITION CHALLENGE</span>
                    </router-link>
                </li>
            </ul>
        </div>
        <div class="baotuan3">
            <div class="baotuan3box">
                <div class="titlebox">
                    <h1>当季热门</h1>
                    <p>没有旅行灵感？看看定制师定制的案例吧</p>
                    <ul>
                        <!-- <li class="t3">广东</li>
                        <li>贵州</li>
                        <li>丽江</li>
                        <li>三亚</li>2
                        <li>厦门</li> -->

                        <li v-for="item in tab" :key="item.des" @mouseenter="tabEnter(item.des)"
                            :class="tabShow == item.des ? 't3' : ''">{{ item.name }}</li>

                    </ul>
                </div>


                <div class="baotuan3list">
                    <dl>

                        <dd v-for="item in tab" :key="item.des">
                            <template v-if="tabShow == item.des">
                                <div v-for="child in item.data" :key="child.id" class="list3">

                                    <div class="imgbox3">
                                        <router-link :to="'/details/' + child.id">
                                            <img width="285" height="140" :src="child.picture || child.pic" />
                                            <input type="button" class="day3" :value="child.line_days + '天'" />
                                            <div class="add3">
                                                <img
                                                    src="https://admin.hqx.com.cn/Public/Travel/images/company/baotuan2_02bai.png" />
                                                <h2>
                                                    <!-- <volist name="rs.jgmdd" id="mdd"> -->
                                                    &nbsp;{{ child.title }}
                                                    <!-- </volist> -->
                                                </h2>
                                                <h3>￥<span>{{ child.price }}</span>/人起</h3>
                                            </div>
                                        </router-link>
                                    </div>
                                    <div class="txtbox3">
                                        <router-link :to="'/details/' + child.id">
                                            <h1>{{ child.title }}</h1>
                                        </router-link>
                                        <!-- <p>{{child.intro}}</p> -->

                                    </div>
                                </div>
                            </template>
                        </dd>

                    </dl>
                </div>
            </div>
        </div>
        <div class="baotuan4box">
            <div class="title">
                <h1>伙伴的支持，让我们不断向前</h1>
                <h2>
                    我们的宗旨：根据企业需求，进行团建的定制，很多企业元素的融入。针对性最强，确保活动与众不同的，有很好的体验!
                </h2>
            </div>
        </div>
        <div class="baotuan4">
            <div class="baotuan4list">
                <div class="list4">
                    <img height="260" src="https://admin.hqx.com.cn/Public/Travel/images/company/baotuan4_01.jpg" />
                    <h1>上海亚翔公司上海-三亚之旅</h1>
                    <p>
                        通过此次三亚之旅，大家不仅感受了海南美不胜收的自然风光、享受了旅游的喜悦与轻松，
                        同时也感受到公司的温暖和关怀。
                    </p>
                </div>
                <div class="list4">
                    <img height="260" src="https://admin.hqx.com.cn/Public/Travel/images/company/baotuan4_02.jpg" />
                    <h1>莫干山团建拓展</h1>
                    <p>
                        定制师行程安排的很丰富，行程中的服务很周到。导游很风趣，服务很好，行程中遇到的问题都能很好的处理，遇到的各种问题都能很。
                    </p>
                </div>
                <div class="list4">
                    <img height="260" src="https://admin.hqx.com.cn/Public/Travel/images/company/baotuan4_03.jpg" />
                    <h1>...</h1>
                    <p></p>
                </div>
            </div>
        </div>
        <web-footer />
    <back-top />
    </div>
</template>

<script setup>


import { line_items, } from "@/api/travel";
import { ref, computed, onUpdated, watch, onMounted, onUnmounted, } from "vue";

let list = ref([]);
let tab = ref([
    { name: "广东", des: 2 },
    { name: "北京", des: 17 },
    { name: "贵州", des: 19 },
    { name: "海南", des: 13 },
    { name: "福建", des: 16 },
]);
let tabShow = ref(tab.value[0].des);

// 选项卡滑入事件
let tabEnter = (des) => {
    tabShow.value = des;
};



onMounted(async () => {
    // 请求列表数据
    // 列表
    list.value = (await line_items({ line_type: 2, limit: 5, des: 2, page: 1 })).data;
    // 选项卡
    // des 广东2 云南18 贵州19 海南13 福建16
    tab.value.forEach(async (item) => {
        item.data = (await line_items({ des: item.des, limit: 4 })).data;
    });


})




</script>

<style lang="scss" scoped>
@import "../../css/main_group_index.css";
</style>
